<template>
  <div>
    <HeadNavTwo><span class="title">人才详情</span></HeadNavTwo>
    <!-- 照片 -->
    <div class="content">
      <div class="img">
        <img :src="itemData.url" alt="" />
      </div>
      <div class="info">
        <div class="info-name">
          <div class="name">{{itemData.uname}}</div>
          <div class="profession">{{itemData.job}}</div>
        </div>
        <div class="info-sex">
          <div class="info-desc">
            {{itemData.sex}}<i>|</i>{{itemData.nianling}}岁<i>|</i>{{itemData.yearC}}年5月<i>|</i>{{itemData.xl}}
          </div>
          <div class="info-work">工作经验:{{itemData.yearA}}-{{itemData.yearB}}年</div>
        </div>
        <div class="money">{{itemData.price}}圆/月</div>
      </div>
    </div>
    <!-- 个人介绍 -->
    <div class="desc">
      <h2 class="desc-title">个人介绍:</h2>
      <div class="desc-text">
        {{itemData.desc}}
      </div>
    </div>
    <el-button class="btn">立即联系</el-button>
  </div>
</template>

<script>
import HeadNavTwo from '../../components/HeadNavTwo'
export default {
  name: "TalentsDetails",
  data(){
    return{
      itemData:{}
    }
  },
  components:{
    HeadNavTwo
  },
  methods: {
  },
  mounted(){

    //刷新
    if(this.$route.params.id){
      const setActive = localStorage.setItem('getActiveData',JSON.stringify(this.$route.params.id)) 
      this.itemData = this.$route.params.id
    }else{
      const getActive = JSON.parse(localStorage.getItem('getActiveData'))
      // console.log(getActive);
      this.itemData = getActive
    }
    // console.log(this.$route.params.id);
    // this.itemData = this.$route.params.id
  }
};
</script>

<style lang="less" scoped>

.head {
  width: 100%;
  display: flex;
  box-sizing: border-box;
  padding-left: 10px;
  background-color: #eee;
  .goBack {
    font-size: 37px;
  }
  .page {
    flex: 1;
    font-size: 22px;
    line-height: 55px;
    text-align: center;
    margin-left: -47px;
  }
}
// 照片
.content {
  width: 100%;
  height: 193px;
  padding: 15px 10px;
  box-sizing: border-box;
  display: flex;
  margin-bottom: 10px;
  background-color: #fff;
  .img {
    width: 117px;
    height: 100%;
    margin-right: 20px;
    img {
      width: 100%;
      height: 100%;
      border-radius: 8px;
    }
  }
  .info {
    padding-top: 10px;
    .info-name {
      display: flex;
      .name {
        font-size: 20px;
        font-weight: 600;
      }
      .profession {
        height: 15px;
        line-height: 15px;
        font-size: 10px;
        border: 1px solid purple;
        color: purple;
        border-radius: 4px;
        padding: 0 8px;
        font-weight: 0;
        margin: 8px 14px 0;
        box-sizing: border-box;
      }
    }
    .info-sex {
      width: 100%;
      .info-desc {
        height: 20px;
        font-size: 14px;
        color: #999;
        margin: 10px 0;
        box-sizing: border-box;
        i {
          margin: 0 5px;
        }
      }
    }
    .info-work {
      height: 20px;
      font-size: 14px;
      margin: 10px 0;
    }
    .money {
      color: #ff4444;
      font-size: 16px;
      margin-top: 30px;
    }
  }
}
// 个人介绍
.desc {
  background-color: #fff;
  padding: 10px;
  box-sizing: border-box;
  .desc-title {
    font-size: 16px;
    letter-spacing: 2px;
  }
  .desc-text {
    font-size: 14px;
    letter-spacing: 1px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 5;
    overflow: hidden;
    white-space: nowrap;
  }
}
// 联系
.btn{
    width: 95%;
    height: 44px;
    background-color: purple;
    color: #fff;
    margin: 80px 9px;
    // margin: 0 auto;
    box-sizing: border-box;
}
</style>